<template>
    <div :id="'lineChart' + lineSet.lineIndex" ref="lineChart" style="width: 100%; height: 20vh"></div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "barChart",
        data() {
            return {
                timer: null,
                option: {
                    xAxis: [
                        {
                            data: []
                        }
                    ],
                    yAxis: [

                    ],
                    series: [

                    ]
                }
            }
        },
        props: {
            lineSet: { type: Object, required: true }
            // data: { type: Object, required: true }
        },
        methods: {
            createLineChart() {
                var chartDom = this.$refs.lineChart
                var myChart = echarts.init(chartDom);
                this.option.series.forEach(item => {
                    item.data = []
                })
                this.option.xAxis[0].data = []
                this.option = {
                    grid:{
                        x:55,
                        y:55,
                        x2:40,
                        y2:50,
                        borderWidth:10
                    },
                    title: {
                        text: this.lineSet.title,
                        textStyle: {
                            fontSize: 15,
                            fontWeight: 'normal',              //标题颜色
                            color: '#ffffff',
                        },
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            // prettier-ignore
                            data: this.lineSet.dataAxis,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: 'rgb(150,150,150)',  //更改坐标轴文字颜色
                                    fontSize : 12      //更改坐标轴文字大小
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#315070' //更改坐标轴颜色
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: 'rgb(150,150,150)',  //更改坐标轴文字颜色
                                    fontSize : 12      //更改坐标轴文字大小
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#315070' //更改坐标轴颜色
                                }
                            }
                        }
                    ],
                    series: [
                        // {
                        //     name: 'Line 1',
                        //     type: 'line',
                        //     stack: 'Total',
                        //     smooth: true,
                        //     lineStyle: {
                        //         width: 0
                        //     },
                        //     showSymbol: false,
                        //     areaStyle: {
                        //         opacity: 0.8,
                        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //             {
                        //                 offset: 0,
                        //                 color: 'rgba(128, 255, 165)'
                        //             },
                        //             {
                        //                 offset: 1,
                        //                 color: 'rgba(1, 191, 236)'
                        //             }
                        //         ])
                        //     },
                        //     emphasis: {
                        //         focus: 'series'
                        //     },
                        //     data: [140, 232, 101, 264, 90, 340, 250]
                        // },
                        {
                            name: 'Line 2',
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(0, 221, 255)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(77, 119, 255)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.lineSet.data
                        },
                        // {
                        //     name: 'Line 3',
                        //     type: 'line',
                        //     stack: 'Total',
                        //     smooth: true,
                        //     lineStyle: {
                        //         width: 0
                        //     },
                        //     showSymbol: false,
                        //     areaStyle: {
                        //         opacity: 0.8,
                        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //             {
                        //                 offset: 0,
                        //                 color: 'rgba(55, 162, 255)'
                        //             },
                        //             {
                        //                 offset: 1,
                        //                 color: 'rgba(116, 21, 219)'
                        //             }
                        //         ])
                        //     },
                        //     emphasis: {
                        //         focus: 'series'
                        //     },
                        //     data: [320, 132, 201, 334, 190, 130, 220]
                        // },
                        // {
                        //     name: 'Line 4',
                        //     type: 'line',
                        //     stack: 'Total',
                        //     smooth: true,
                        //     lineStyle: {
                        //         width: 0
                        //     },
                        //     showSymbol: false,
                        //     areaStyle: {
                        //         opacity: 0.8,
                        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //             {
                        //                 offset: 0,
                        //                 color: 'rgba(255, 0, 135)'
                        //             },
                        //             {
                        //                 offset: 1,
                        //                 color: 'rgba(135, 0, 157)'
                        //             }
                        //         ])
                        //     },
                        //     emphasis: {
                        //         focus: 'series'
                        //     },
                        //     data: [220, 402, 231, 134, 190, 230, 120]
                        // },
                        // {
                        //     name: 'Line 5',
                        //     type: 'line',
                        //     stack: 'Total',
                        //     smooth: true,
                        //     lineStyle: {
                        //         width: 0
                        //     },
                        //     showSymbol: false,
                        //     label: {
                        //         show: true,
                        //         position: 'top'
                        //     },
                        //     areaStyle: {
                        //         opacity: 0.8,
                        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //             {
                        //                 offset: 0,
                        //                 color: 'rgba(255, 191, 0)'
                        //             },
                        //             {
                        //                 offset: 1,
                        //                 color: 'rgba(224, 62, 76)'
                        //             }
                        //         ])
                        //     },
                        //     emphasis: {
                        //         focus: 'series'
                        //     },
                        //     data: [220, 302, 181, 234, 210, 290, 150]
                        // }
                    ]
                };

                this.option && myChart.setOption(this.option);
            }
        },
        mounted() {
            this.createLineChart()
            this.timer = setInterval(() => {
                this.createLineChart()
            }, 10000)
        },
        beforeDestroy () {
            clearInterval(this.timer)
        }
    }
</script>

<style scoped>

</style>
